<!--  -->
<template>
  <div class="mine-view">
    <!-- 我的页面 -->
    <div v-if="mineFlag">
      <header class="mine-header" v-if="mineListDatas">
        <div class="user-header">
          <a href="javascript:;" class="avatarImg" @click="toUserInfo">
            <img :src="mineListDatas.avatar" alt="头像" class="img" />
          </a>
          <h4>{{ mineListDatas.name }}</h4>
        </div>
      </header>
    </div>
    <!-- 子路由显示 -->
    <router-view v-else></router-view>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { profileApi } from '@/api/user'
import { Toast } from 'vant'
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return { mineListDatas: null, mineFlag: true };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    toUserInfo() {
      this.mineFlag = false;
      this.$router.push('/mineview/profile')
    },
  },
  beforeCreate() { }, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() { },
  beforeMount() { }, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    profileApi().then((res) => {
      if (res.data.status == "success") {
        console.log(res.data);
        this.mineListDatas = res.data.data;
      }
      else {
        this.$router.push('/loginview')
      }
    }).
      catch((error) => {
        Toast(error);
        this.$router.push('/loginview')
      })
  },
  beforeUpdate() { }, //生命周期 - 更新之前
  updated() { }, //生命周期 - 更新之后
  beforeDestroy() { }, //生命周期 - 销毁之前
  destroyed() { }, //生命周期 - 销毁完成
  activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less">
.mine-view {
  .mine-header {
    height: 21rem;
    background: linear-gradient(-88deg, #ff4c30, #ea0a21);

    .user-header {
      padding: 4rem 1.7rem 1.7rem;
      color: #fff;
      display: flex;

      .avatarImg {
        width: 6.5rem;
        height: 6.5rem;
        border: 0.25rem solid hsla(0, 0%, 100%, 0.29);
        border-radius: 50%;

        img {
          border-radius: 50%;
          height: 100%;
        }
      }
    }
  }
}
</style>